<template>
	<view class="keyGroupAll">
	<!-- 顶部地址选项 -->
		<u-sticky >
			<topArea/>	
			<!-- tabs -->		
			<u-tabs :list="list"  :current="current" @change="change" :show-bar="false"></u-tabs>
		</u-sticky>
	
	<view class="keyMain">
		<view class="" v-show="current==0">城镇劳动力
			
			<view class="">
				<view class="title">已就业信息</view>
				<ul class="currUl">
					<li>就业区域分析</li>
					<li>
						<!-- <ringEcharts1/> -->
					</li>
				</ul>
				
				<ul class="currUl">
					<li>就业方式</li>
					<li>
						<!-- <columnEchart/> -->
					</li>
				</ul>
				
				<ul class="currUl">
					<li>就业地址分布</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>已就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>月均收入</li>
					<li>图表</li>
				</ul>
			</view>
			
			
			<view class="viewUnemployed">
				<view class="title">未就业信息</view>
				<ul class="currUl">
					<li>未就业原因分析</li>
					<li>
						<!-- <ringEcharts1/> -->
					</li>
				</ul>
				
				<ul class="currUl">
					<li>未就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>就业需求</li>
					<li>图表</li>
				</ul>
			</view>
			
		</view>
		<view class="" v-show="current==1">农村（乡村）劳动力
			<view class="">
				<view class="title">已就业信息</view>
				<ul class="currUl">
					<li>就业区域分析</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>就业方式</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>就业地址分布</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>已就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>月均收入</li>
					<li>图表</li>
				</ul>
			</view>
			
			
			<view class="viewUnemployed">
				<view class="title">未就业信息</view>
				<ul class="currUl">
					<li>未就业原因分析</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>未就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>就业需求</li>
					<li>图表</li>
				</ul>
			</view>
			
		
		
		</view>
		<view class="" v-show="current==2" class="">
			<view class="topCard">
				<view class="card1">
					<u-line color="#A8CCF2" class="uLine" length="30%" hair-line="false"/>
					<text>777</text>
					<u-line color="#A8CCF2" class="uLine1" length="30%" hair-line="false"/>
					</view>
				<view class="card2">已就业劳动力总数（万人）</view>
			</view>
			<view class="current2">				
				<ul class="currUl">
					<li>劳动力属性分析</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>就业区域分析</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>就业方式</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>就业地址分布</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>已就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>月均收入</li>
					<li>图表</li>
				</ul>
			</view>
		</view>
		<view class="" v-show="current==3" class="">
		    <view class="topCard">
		    	<view class="card1">
		    		<u-line color="#A8CCF2" class="uLine" length="30%" :hair-line="false"/>
		    		<text>777</text>
		    		<u-line color="#A8CCF2" class="uLine1" length="30%" :hair-line="false"/>
		    		</view>
		    	<view class="card2">未就业劳动力总数（万人）</view>
		    </view>
			<view class="current2">
				
				<ul class="currUl">
					<li>劳动力属性分析</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>未就业原因</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>未就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>就业需求</li>
					<li>图表</li>
				</ul>
				
			</view>
		</view>
		
		<view class="" v-show="current==4" class="">易扶搬迁户
			<view class="">
				<view class="title">已就业信息</view>
				<ul class="currUl">
					<li>就业区域分析</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>就业方式</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>就业地址分布</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>已就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>月均收入</li>
					<li>图表</li>
				</ul>
			</view>
			
			
			<view class="viewUnemployed">
				<view class="title">未就业信息</view>
				<ul class="currUl">
					<li>未就业原因分析</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>未就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>就业需求</li>
					<li>图表</li>
				</ul>
			</view>
		</view>
		<view class="" v-show="current==5">脱贫劳动力（脱贫户）
			<view class="">
				<view class="title">已就业信息</view>
				<ul class="currUl">
					<li>就业区域分析</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>就业方式</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>就业地址分布</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>已就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>月均收入</li>
					<li>图表</li>
				</ul>
			</view>
			
			
			<view class="viewUnemployed">
				<view class="title">未就业信息</view>
				<ul class="currUl">
					<li>未就业原因分析</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>未就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>就业需求</li>
					<li>图表</li>
				</ul>
			</view>
		
		</view>
		<view class="" v-show="current==6">边缘易致贫户（边缘户）
			<view class="">
				<view class="title">已就业信息</view>
				<ul class="currUl">
					<li>就业区域分析</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>就业方式</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>就业地址分布</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>已就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>月均收入</li>
					<li>图表</li>
				</ul>
			</view>
			
			
			<view class="viewUnemployed">
				<view class="title">未就业信息</view>
				<ul class="currUl">
					<li>未就业原因分析</li>
					<li>图表</li>
				</ul>
				
				<ul class="currUl">
					<li>未就业劳动力所属区域排行</li>
					<li>图表</li>
				</ul>
				<ul class="currUl">
					<li>就业需求</li>
					<li>图表</li>
				</ul>
			</view>
		</view>
		<view class="" v-show="current==7">脱贫不稳定户（监测户）
		      <view class="">
		      	<view class="title">已就业信息</view>
		      	<ul class="currUl">
		      		<li>就业区域分析</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>就业方式</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>就业地址分布</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>已就业劳动力所属区域排行</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>月均收入</li>
		      		<li>图表</li>
		      	</ul>
		      </view>
		      
		      
		      <view class="viewUnemployed">
		      	<view class="title">未就业信息</view>
		      	<ul class="currUl">
		      		<li>未就业原因分析</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>未就业劳动力所属区域排行</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>就业需求</li>
		      		<li>图表</li>
		      	</ul>
		      </view>
		
		
		</view>
		<view class="" v-show="current==8">突发严重困难户
		      <view class="">
		      	<view class="title">已就业信息</view>
		      	<ul class="currUl">
		      		<li>就业区域分析</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>就业方式</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>就业地址分布</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>已就业劳动力所属区域排行</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>月均收入</li>
		      		<li>图表</li>
		      	</ul>
		      </view>
		      
		      
		      <view class="viewUnemployed">
		      	<view class="title">未就业信息</view>
		      	<ul class="currUl">
		      		<li>未就业原因分析</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>未就业劳动力所属区域排行</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>就业需求</li>
		      		<li>图表</li>
		      	</ul>
		      </view>
		
		</view>
		<view class="" v-show="current==9">高校毕业生
		      <view class="">
		      	<view class="title">已就业信息</view>
		      	<ul class="currUl">
		      		<li>就业区域分析</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>就业方式</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>就业地址分布</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>已就业劳动力所属区域排行</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>月均收入</li>
		      		<li>图表</li>
		      	</ul>
		      </view>
		      
		      
		      <view class="viewUnemployed">
		      	<view class="title">未就业信息</view>
		      	<ul class="currUl">
		      		<li>未就业原因分析</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>未就业劳动力所属区域排行</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>就业需求</li>
		      		<li>图表</li>
		      	</ul>
		      </view>
		
		</view>
		<view class="" v-show="current==10">城镇登记失业人员
		      <view class="">
		      	<view class="title">已就业信息</view>
		      	<ul class="currUl">
		      		<li>就业区域分析</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>就业方式</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>就业地址分布</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>已就业劳动力所属区域排行</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>月均收入</li>
		      		<li>图表</li>
		      	</ul>
		      </view>
		      
		      
		      <view class="viewUnemployed">
		      	<view class="title">未就业信息</view>
		      	<ul class="currUl">
		      		<li>未就业原因分析</li>
		      		<li>图表</li>
		      	</ul>
		      	
		      	<ul class="currUl">
		      		<li>未就业劳动力所属区域排行</li>
		      		<li>图表</li>
		      	</ul>
		      	<ul class="currUl">
		      		<li>就业需求</li>
		      		<li>图表</li>
		      	</ul>
		      </view>
		
		
		
		</view>
	</view>
	
	
	
	
	
	
	<!-- 底部导航栏 -->
	<ul class="footerUl">
		<li @click="Jump(1)" :class="[typeID1==1?'footli1':'footli']">
			<u-icon name="home" size="38"  class="icon1"></u-icon>
			<span>首页</span>
		</li>
		<li @click="Jump(2)" :class="[typeID1==2?'footli1':'footli']">
			<u-icon name="man-add"  size="38" class="icon1"></u-icon>
			<span>重点人群分析</span>
		</li>
	</ul>
	</view>
</template>

<script>
	import topArea from "../../pages/humanSociety/topArea.vue"
	// import ringEcharts1 from "../../components/echart/ring-echarts1.vue"
	// import columnEchart from "../../components/echart/column-echart.vue"
	
	export default{
		// onShow: function() {
		//     wx.hideHomeButton();  //隐藏home/返回主页按钮
		//   },
		components: {
					topArea,
					// ringEcharts1,
					// columnEchart
				},
		data(){
			return{
				typeID1:2,
				list: [{
									name: '城镇劳动力'
								}, {
									name: '农村（乡村）劳动力'
								},{
									name: '已就业劳动力',									
								},{
									name: '未就业劳动力',									
								}, {
									name: '易扶搬迁户',									
								},{
									name: '脱贫劳动力',									
								},{
									name: '边缘易致贫户',									
								},{
									name: '脱贫不稳定户',									
								},{
									name: '突发严重困难户',									
								},{
									name: '高校毕业生',									
								},{
									name: '城镇登记失业人员',									
								}],
								current: 0
			}
		},
			
		methods:{
			Jump(id){
				this.typeID1=id
				if(id==1){
					wx.reLaunch({
						url: "/pages/humanSociety/workforceAnalytics",
					});
				}
				// else if(id==2){
				// 	wx.reLaunch({
				// 	    url: "/pages/humanSociety/keyGroups",
				// 	});	
				// }
				
			},
			change(index) {
							this.current = index;
						}
		}
	}
</script>

<style lang="scss" scoped>
	.keyGroupAll{
		background: #F6FAFD;
		
		
		// margin-bottom: 100px;
		.keyMain{
			z-index: 1;
			margin: 10px 14px;
			.title{
				height: 30px;
				line-height: 30px;
			}
			.currUl{
				// height: 120px;
				background: #FFFFFF;
				padding: 6px;
				margin-bottom: 10px;
				li:nth-child(1){
					line-height: 30px;
					
				}
				li:nth-child(2){
					padding: 10px;
				}
			}
			.viewUnemployed{
				padding-bottom: 100px;
			}
			.topCard{
				height: 60px;
				text-align: center;
				border-style: solid;
				border-width: 6px 8px 6px 8px;
				border-color: #529EED;
				margin-bottom: 10px;
				border-radius: 4px;
				.card1{
					color: #529EED;
					font-size: 16px;
					height: 24px;
					line-height: 24px;
					display: flex;
					text{
						margin-left: 20px;
						margin-right: 20px;
					}
					
					.uLine{
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
					.uLine1{
						display: flex;
						align-items: center;
					}
				}
				.card2{
					font-size: 12px;
					line-height: 20px;
				}
			}
		}
		.current2{
			padding-bottom: 100px;
		}
		
	}
	.footerUl{
		position: fixed;
		bottom: 0;
		font-size: 10px;
		color: gray;
		width: 100%;
		height: 40px;
		border: 1px solid #F0F0F0;
		background: white;
		display: flex;
		justify-content: space-between;
		.footli1{
			width: 49%;
			height: 40px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #5D9BDC;
			.icon1{
				color: #5D9BDC;
			}
			
		}
		.footli{
			width: 49%;
			height: 40px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: gray;
			.icon1{
				color: gray;
			}
			
		}
	}
</style>